<%@page import="com.kensure.shike.constant.BusiConstant"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<jsp:include page="base/header.jsp" flush="true"> 
 <jsp:param value="商品管理" name="pageTitle"/>
</jsp:include>
	<script type="text/javascript" charset="utf-8" src="<%=BusiConstant.context%>/utf8-jsp/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="<%=BusiConstant.context%>/utf8-jsp/ueditor.all.min.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="<%=BusiConstant.context%>/utf8-jsp/lang/zh-cn/zh-cn.js"></script>
<style>
	.pic{width:180px;height:180px;}
</style>
<body>


<style>
.mainweb{ 
	width:100%; 
	height:100%; 
	overflow:auto; 
} 
.btop{
	position:absolute; 
	top:10px; 
	right:16px; 
	width:100px; 
	height:100px; 
}
</style>

<div style="padding: 15px;" class="mainweb layui-anim layui-anim-upbit">
	
	<fieldset class="layui-elem-field">
		<legend>商品编辑</legend>
		<div class="layui-field-box">
		    <form id="baobei" class="layui-form" lay-filter="form">
			   
			     <div class="layui-form-item">
					<label class="layui-form-label">商品名称</label>
					<div class="layui-inline">
						<input type="text" name="title" style="width:600px;" placeholder="商品名称" class="layui-input" value="">
					</div>
				</div>
				
				 <div class="layui-form-item">
					<label class="layui-form-label">备注</label>
					<div class="layui-inline">
						<input type="text" name="code" style="width:600px;" placeholder="备注" class="layui-input" value="">
					</div>
				</div>
				
				<div class="layui-form-item">
						<label class="layui-form-label">销售收入归结账户</label>
						<div class="layui-inline">			
							<select name="sjid" id="sjid">
						    	
						     </select>
						</div>
				</div>
				
			     <div class="layui-form-item" id="fenlei">
					<label class="layui-form-label">分类</label>
			     </div>
		
				
				<div class="layui-form-item">
					<label class="layui-form-label">一级分润</label>
					<div class="layui-inline">
						<input type="text" name='vip1Fenrui1' class="layui-input"  value=''>
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">二级分润</label>
					<div class="layui-inline">
						<input type="text" name='vip2Fenrui2' class="layui-input"  value=''>
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">直接推荐人</label>
					<div class="layui-inline">
						<input type="text" name='tjr1' class="layui-input"  value=''>
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">间接推荐人</label>
					<div class="layui-inline">
						<input type="text" name='tjr2' class="layui-input"  value=''>
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">坐标</label>
					<div class="layui-inline">
						<input type="text" name='zuobiao' class="layui-input"  value=''>
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">地址</label>
					<div class="layui-inline">
						<input type="text" name='dizhi' class="layui-input"  value='' style="width:600px;">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">关键词</label>
					<div class="layui-inline">
						<input type="text" name='tag' class="layui-input"  value='' style="width:600px;">
					</div>
				</div>
				
				<div class="layui-form-item" id="guigediv">	
					<label class="layui-form-label">规格</label>
					<button class="layui-btn" type="button" onclick="addguige()">增加规格</button>

					<div class="layui-inline" >
						优惠券名称：<input type="text" name='color' class="layui-input"  value=''>
						价格：<input type="text" name='colorprice' class="layui-input"  value=''>
						说明：<textarea name='colorcontent' class="layui-input" style="width:300px;height:300px;"></textarea>
						<input type="button" onclick="delDiv(this)" value="删除">
					</div>
				</div>
				

				<div class="layui-form-item" >			
					<label class="layui-form-label">商品视频</label>
					<video id="spurl" src="" onclick="uploadpic(this)" controls style="width:300px;">
		            	该浏览器不支持h5的video标签
		       	 	</video>
				</div>

				<div class="layui-form-item">			
					<label class="layui-form-label">轮播图片</label>
					<div class="item-con" id="img-con">
		                  <img class="pic" src="<%=BusiConstant.context%>/common/images/no_pic.jpg" onclick="uploadpic(this)"><input type="button" onclick="delPic(this)" value="删除">
		                  <img class="pic" src="<%=BusiConstant.context%>/common/images/no_pic.jpg" onclick="uploadpic(this)"><input type="button" onclick="delPic(this)" value="删除">
		                  <img class="pic" src="<%=BusiConstant.context%>/common/images/no_pic.jpg" onclick="uploadpic(this)"><input type="button" onclick="delPic(this)" value="删除">
		                  <img class="pic" src="<%=BusiConstant.context%>/common/images/no_pic.jpg" onclick="uploadpic(this)"><input type="button" onclick="delPic(this)" value="删除">
		                  <img class="pic" src="<%=BusiConstant.context%>/common/images/no_pic.jpg" onclick="uploadpic(this)"><input type="button" onclick="delPic(this)" value="删除">
		            </div>
				</div>
			
				<div class="layui-form-item">
					<label class="layui-form-label">排序(越小越排前面)</label>
					<div class="layui-inline">
						<input type="text" name='disorder' class="layui-input" value="1000">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">厂商详情</label>
					<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
				</div>
			
		        
		    </form>
		 </div>
	</fieldset>		
</div>

 	<div id="dg" class="proll">
		<div class="divroll">
				<button id="btn1" onclick="savebaobei()"  class="layui-btn layui-btn-normal">保存</button>
				
		</div>
	</div>

</body>




<script>
	var ue;	
	$(function(){
		ue = UE.getEditor('editor',{
		    autosave: false,
		    textarea:"content"
		});
	})
	
	
	function setleimu(){
		var url = getbaseurl("/type/gettype.do");
		var data = {typeid:4};
		postsync(url, data, function(data){
			var rows = data.resultData.rows;
			var html = "";
			for(var i=0;rows.length>i;i++){
				var row = rows[i];
				html += "<input name='typeid' type='radio' title='"+row.name+"' value='"+row.id+"'>";
			}
			$("#fenlei").append(html);
		}, null, null);
	}
    setleimu();
	

    var id = getQueryVariable("id");
   //JavaScript代码区域，layui初始化
   $(function(){
	   ue.ready(function() { 
			layui.use(['element', 'layer', 'form', 'laydate', 'upload'], function() {
				var $ = layui.jquery;
				var element = layui.element;
				var layer = layui.layer;
				var form = layui.form;
				var laydate = layui.laydate,
					upload = layui.upload;
				laydate.render({
					 elem: '#timeExpire'
					,type: 'datetime'
			 	});
				
				var url = getbaseurl("/changshang/alllist.do");
				var data = {pageSize:100};
				postsync(url, data, function(data){
					var rows = data.resultData.rows;
					$.each(rows, function (index, item) {
						$('#sjid').append(new Option(item.name, item.id));// 下拉菜单里添加元素
					});
					layui.form.render("select");
				}, null, null);		
				
				
				//显示编辑的内容
				if(id){
			    	var url = getbaseurl("/baobei/getfull.do");
			    	var data = {id:id};
			    	postsync(url, data, function(data){
						var row = data.resultData.row;
						row.typeid = row.typeid+"";
						if(row.spurl){
							$('#spurl').attr("src",row.spurl);
						}
						if(row.yansePics){
							for(var i=0;row.yansePics.length>i;i++){
								var guige = row.yansePics[i];
								addguige1(guige);
							}
						}
						//轮播图片
						if(row.pics){
							var imgs = $("#img-con").children(".pic");
							for(var i=0;row.pics.length>i;i++){
								var guige = row.pics[i];
								var img = $(imgs[i]);
								img.attr("src",guige.url);
							}
						}
						if(!row.detail.content){
							row.detail.content = "";
						}
						ue.setContent(row.detail.content,false);
						form.val('form',row);
						form.render();
					}, null, null);
			    }
			});
	   });
	});
	function addguige(){
		var guigediv = $('#guigediv');
		var guigelist = guigediv.children('div');
		var first = $(guigediv.children('div')[guigelist.length-1]);		
		guigediv.append(first.prop("outerHTML"));
	}
	
	function addguige1(guige){
		addguige();
		var guigediv = $('#guigediv');
		var guigelist = guigediv.children('div');
		var last = $(guigelist[guigelist.length-2]);
		last.children('input[name="color"]').val(guige.yanse);
		last.children('input[name="colorprice"]').val(guige.price);
		last.children('textarea[name="colorcontent"]').val(guige.content);	
	}
	
	function uploadpic(obj){
		//上传活动主图
		uploadImage(function(p) {
			var rows = p.resultData.rows;
			$.each(rows, function(i, row){
			      $(obj).attr("src",row);
			});
		}, false);
	}
	
	function delPic(obj){
		$(obj).prev().attr("src",'<%=BusiConstant.context%>/common/images/no_pic.jpg');
	}
	
	function delDiv(obj){
		var yanse = $('.yansepic');
		if(yanse.length == 1){
			alert('至少存在一个规格');
			return;
		}
		$(obj).parent().remove();
		
	}
	
	
	// 保存
	var baocun = false;
	function savebaobei() {
		if (baocun) {
			alert("请勿重复保存");
		}	
		baocun = true;
		var data = formtojson($('#baobei'));
		data.spurl = $('#spurl').attr("src");
		
		// 图片
		var tplist = [];
		var imgs = $("#img-con").children(".pic");
		for (var i = 0; i < imgs.length; i++) {
			var img = imgs[i];
			var tpurl = img.src;
			if(tpurl.indexOf('no_pic.jpg') >= 0){
				continue;
			}
			var tp = {
				url : img.src
			};
			tplist.push(tp);
		}
		data.pics = JSON.stringify(tplist);	
		//详情
		var detail = {content:ue.getContent()};
		data.detail = JSON.stringify(detail);
		
		//颜色
		var colors = [];
		$('input[name="color"]').each(function(){
            var tagid= {yanse:$(this).val()};
            colors.push(tagid);
         });
		$('input[name="colorprice"]').each(function(index,item){
			var tagid= $(this).val();
           	colors[index].price = tagid;
        });
		$('textarea[name="colorcontent"]').each(function(index,item){		
			var tagid= $(this).val();
           	colors[index].content = tagid;
        });
		var yansePics = [];
		for(var i=0;i<colors.length;i++){
			var img = colors[i];
			if(img.yanse){
				yansePics.push(img);
			}
		}
		data.yansePics = JSON.stringify(yansePics);
		
		if(id){
			data.id = id;
		}
		
		var url = getbaseurl("/baobei/save.do");
		postdo(url, data, function(data){
			alert("保存成功")
			var mylay = parent.layer.getFrameIndex(window.name);
            parent.layer.close(mylay);
            window.parent.doSearch();
		}, null, svcompdo);
	}
	
	function svcompdo(data) {
		baocun = false;
	}
	
     
</script>


</html>